<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用webView显示图片</title>
    
    <script language="JavaScript">
        function clickCameraBtn()
        {
            var height = document.getElementById("height").value;
            var width = document.getElementById("width").value;
            var cameraType = document.getElementById("cameraType").value;
            var photoSource = document.getElementById("photoSource").value;
            
            var json = {
                "height" : height,
                "width" : width,
                "cameraType" : cameraType,
                "photoSource" : photoSource
            };
            hxr.clickCamera(json);
        }
    
        function showImage(url)
        {
            var img = document.getElementById("img");
            img.src = url;
        }
    
        function showMsg(msg)
        {
            var msgNode = document.getElementById("msg");
                msgNode.innerHTML = msg;
        }
    </script>
    
</head>
<body>

<form>
    <p>高<input type="text" id="height" value="50"></p>
    <p>宽<input type="text" id="width" value="100"></p>

    <p>
        摄像头
        <select id="cameraType">
            <option value="postposition">后置</option>
            <option value="preposition">前置</option>
        </select>
    </p>

    <p>
        图片来源
        <select id="photoSource">
            <option value="camera">相机</option>
            <option value="photos">相册</option>
            <option value="all">全部</option>
        </select>
    </p>

    <p><input type="button" value="相机" onclick="clickCameraBtn()" style="background-color: #110aff;width: 80px;height: 40px;border-radius:8px;"/></p>
    
    <p id="msg"/>
    
    <div id="imaArea">
        <img id="img" src="exam-3.png" />
    </div>
</form>

</body>

</html>